import React, { useState, useEffect, useRef } from "react";
import { Button } from "antd";
import "./Demo1.less";

let prev1, prev2;

const Demo = function Demo(props) {
  let [num, setNum] = useState(0);
  // 两者区别useRef和React.createRef()
  const box1 = useRef();
  const box2 = React.createRef();

  if (!prev1) {
    prev1 = box1;
    prev2 = box2;
  } else {
    console.log(prev1 === box1);
    console.log(prev2 === box2);
  }

  useEffect(() => {
    console.log(box1.current);
    console.log(box2.current);
  }, []);

  return (
    <div className="demo">
      <span className="num" ref={box1}>
        {num}
      </span>
      <span className="num" ref={box2}>
        hello react
      </span>
      <Button
        type="primary"
        size="small"
        onClick={() => {
          setNum(num + 1);
        }}
      >
        新增
      </Button>
    </div>
  );
};
/** 使用useRef来创建一个ref */
//   const box = useRef();
//   useEffect(() => {
//     console.log(box.current);
//   }, []);

//   return (
//     <div className="demo">
//       <span className="num" ref={box}>
//         {num}
//       </span>
//       <Button type="primary" size="small">
//         新增
//       </Button>
//     </div>
//   );
// };

//   /** 基于React.createRef 创建ref对象来获取想要的内容*/
//   const box = React.createRef();
//   useEffect(() => {
//     console.log(box.current);
//   }, []);

//   return (
//     <div className="demo">
//       <span className="num" ref={box}>
//         {num}
//       </span>
//       <Button type="primary" size="small">
//         新增
//       </Button>
//     </div>
//   );
// };

//   /** 基于"ref={函数}"的方式，可以把创建的DOM元素（或者子组件的实例）赋值给box变量（不推荐这样使用）*/
//   let box;
//   useEffect(() => {
//     console.log(box);
//   }, []);

//   const handle = () => {
//     setNum(num + 1);
//   };

//   return (
//     <div className="demo">
//       <span className="num" ref={(x) => (box = x)}>
//         {num}
//       </span>
//       <Button type="primary" size="small" onClick={handle}>
//         新增
//       </Button>
//     </div>
//   );
// };

export default Demo;
